﻿@using System.Globalization
@model MoneyCounter.Models.ChecksListModel
@{
    ViewBag.Title = "MCP - Checks List";
    Layout = "~/Views/Shared/UserPageTemplate.cshtml";
    
}

@section PageSpecificJavascript
{
    @*<script src="../../Scripts/MetroUI/tile-slider.js"></script>*@

    <script>
        $(function () {
            $(".tile").hover(
                function () {
                    $('.brand .tile-bottom-border', this).show("slide", { direction: "down", effects: "easeOutBounce" }, 200);
                    $('.tile-content--front', this).stop().animate({ left: '-310px' }, { queue: false, duration: 200 });
                    $('.tile-content--back', this).stop().animate({ left: '0' }, { queue: false, duration: 200 });
                },
                function () {
                    $('.brand .tile-bottom-border', this).hide("slide", { direction: "down" }, 'fast');
                    $('.tile-content--front', this).stop().animate({ left: '0' }, { queue: false, duration: 200 });
                    $('.tile-content--back', this).stop().animate({ left: '-310px' }, { queue: false, duration: 200 });
                }
            );
        });
    </script>
}

<div id="checkList-list page">

    <div class="page-header">
        <div class="page-header-content">
            <h2 class="fg-color-lighten checks-list-header-caption">Checks List</h2>
            <div class="checks-list-header-toolbox">
                @Html.ActionLink("Go back", "UserMenu", "UserMenu", null, new { @class = "icon-undo margin-right-large" })
                @Html.ActionLink("Add new check manualy", "AddNewCheckManualy", null, new { @class = "icon-plus" })
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content">
            <div class="fg-color-lighten margin-bottom-large">On this page You can view Your checks or manually add new one.</div>
            @{
                if (@Model.Checks == null)
                {
                <div>An error has occurred during attempt to load your checks!</div>
                }
                else if (!@Model.Checks.Any())
                {
                <div>No checks have been added yet. Press 'Add new check manualy' to add some.</div>
                }
                else
                {
                    foreach (var check in @Model.Checks)
                    {
                <div class="tile double check-tile">
                    <div class="tile-content tile-content--front">
                        <div class="tile-content__header">
                            <span>Total price: </span>$@check.TotalPrice
                        </div>
                        <div class="tile__shop">
                            @{
                        if (!string.IsNullOrWhiteSpace(check.ShopName))
                        {
                                <div>
                                    <div style="display: inline">Shop name: @check.ShopName</div>
                                </div>
                        }
                            }
                        </div>
                        <div class="tile__categories-list">
                            @{
                        var categoriesList = new List<string>();
                        foreach (var item in check.Items.Where(i => i.Categories != null && i.Categories.Any()))
                        {
                            categoriesList.AddRange(item.Categories);
                        }

                        if (categoriesList.Any())
                        {
                            foreach (var category in categoriesList.Distinct())
                            {
                                <span class="tile__category-list__category">@category.ToLower()</span>
                            }

                        }
                            }
                        </div>
                    </div>
                    <div class="tile-content tile-content--back">
                        <div class="tile-content__header">
                            There are <span>@check.Items.Count</span> items in check.
                        </div>
                        <div>
                            @{
                                <ul>
                                    @{
                                        foreach (var item in @check.Items)
                                        {
                                            <li>@item.Name</li>
                                        }
                                    }
                                </ul>
                            }
                        </div>
                    </div>
                    <div class="brand custom-brand">
                        <div class="name">@check.Date.DayOfWeek.ToString(), @check.Date.ToString("MMMM", CultureInfo.InvariantCulture) @check.Date.Day at @check.Date.ToShortTimeString()</div>
                        <div class="badge">@check.Items.Count</div>
                        <div class="tile-bottom-border"></div>
                    </div>
                </div>
                    }
                }
            }

            <div class="clear"></div>
        </div>
    </div>

</div>
